import { Component, Host, Prop, h } from '@stencil/core';

/**
 * 列表项
 *
 * @export
 * @class IBzListItem
 */
@Component({
    tag: 'ibz-list-item',
    styleUrl: 'ibz-list-item.scss',
})
export class IBzListItem {
    /**
     * 头像图标地址
     *
     * @type {string}
     * @memberof IBzListItem
     */
    @Prop()
    avatarUrl: string;

    /**
     * 列表标题
     *
     * @type {string}
     * @memberof IBzListItem
     */
    @Prop()
    headerTitle: string;

    /**
     * 列表内容
     *
     * @type {string}
     * @memberof IBzListItem
     */
    @Prop()
    content: string;

    render() {
        return (
            <Host class='ibz-list-item'>
                <div class='item-avatar'>
                    <img class='item-avatar-img' src={this.avatarUrl} />
                </div>
                <div class='item-content-wrapper'>
                    <div class='content-header'>
                        <div class='header-title' title={this.headerTitle}>
                            {this.headerTitle}
                        </div>
                        <div class='header-content'>
                            <slot name='headerContent' />
                        </div>
                    </div>
                    {this.content != null ? (
                        <div class='content ellipsis' title={this.content}>
                            {this.content}
                        </div>
                    ) : null}
                    <div class='content-footer'>
                        <slot />
                    </div>
                </div>
            </Host>
        );
    }
}
